import 'package:flutter/material.dart';
import 'package:flutter_grammar/data/listData.dart';

/* 
GridView 创建网格列表主要有下面三种方式
1、可以通过GridView.count 实现网格布局
2、可以通过GridView.extent 实现网格布局
3、通过GridView.builder实现动态网格布局

常用属性：
- scrollDirection   类型： Axis               设置滚动方法
- padding           类型：EdgeInsetsGeometry  内边距
- crossAxisSpacing  类型：double              水平子Widget之间间距
- mainAxisSpacing   类型：double              垂直子Widget之间间距
- childAspectRatio  类型：double              子Widget宽高比例
- resolve                                     组件反向排序
- children            []

- crossAxisCount       int            一行的Widget数量 (用在GridView.count)
- maxCrossAxisExtent   double         横轴子元素的最大长度 (用在GridView.extent)
- gridDelegate                        控制布局主要用在GridView.builder里面


此外 引入一个Padding组件 


*/

void main() {
  runApp(
      // 入口文件可以是自定义组件 也可以是flutter组件
      MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('GridView'),
      ),
      body: MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // 私有方法
  Widget _getListData(context, index) {
    return Container(
        child: Padding(
          padding: EdgeInsets.all(10),
          child: Column(children: <Widget>[
            Image.network(listData[index]['imageUrl']),
            const SizedBox(height: 12),
            Text(
              listData[index]['title'],
              textAlign: TextAlign.center,
              style: const TextStyle(fontSize: 16),
            )
          ]),
        ));
  }

  @override
  Widget build(BuildContext context) {
    // 1. 通过 GridView.count 实现网格布局
    // return GridView.count(
    //   crossAxisCount: 4, // 个数
    //   childAspectRatio: 1.5,
    //   children: const <Widget>[
    //     Icon(Icons.home),
    //     Icon(Icons.ac_unit),
    //     Icon(Icons.search),
    //     Icon(Icons.settings),
    //     Icon(Icons.airport_shuttle),
    //     Icon(Icons.all_inclusive),
    //     Icon(Icons.beach_access),
    //     Icon(Icons.cake),
    //     Icon(Icons.circle),
    //   ],
    // );

    // 2. 通过 GridView.extent
    // return GridView.extent(
    //   maxCrossAxisExtent: 100.0,  // 子元素宽度
    //   childAspectRatio: 1.0,
    //   children: const <Widget>[
    //     Icon(Icons.home),
    //     Icon(Icons.ac_unit),
    //     Icon(Icons.search),
    //     Icon(Icons.settings),
    //     Icon(Icons.airport_shuttle),
    //     Icon(Icons.all_inclusive),
    //     Icon(Icons.beach_access),
    //     Icon(Icons.cake),
    //     Icon(Icons.circle),
    //   ],
    // );

    // 3. 动态网格布局
    return GridView.builder(
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,childAspectRatio: 0.8),
        itemCount: listData.length,
        itemBuilder: _getListData);
  }
}
